<!DOCTYPE HTML>
<html>
<head>
<title>Boomerang Howto #1b: User clicks a link on a page we control and page is usable at some developer determined point</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../boomerang-docs.css">
</head>
<body>
<span style="float:right;"><a href="../">All Docs</a> | <a href="index.html">Index</a></span>
<h1>Boomerang Howto #1b:<br>User clicks a link on a page we control and page is usable at some developer determined point</h1>
<p>
See <a href="../use-cases.html#uc-1">use case #1</a> for a description of this requirement.
</p>
<p>
We use two pages for this use case.  They may be any two pages on your site, and the code you put into them
is identical, so you could just put it on all pages on your site.  Unlike case 1a, in this case, we do not
allow the beacon to fire when the onload event fires.  Instead, we fire the <code>page_ready</code> event
when we determine that the page is ready.  We also set the <code>autorun</code> parameter to false to stop
boomerang from running automatically.
</p>
<ol>
<li>Copy boomerang.js and the images/ directory into your document root</li>
<li>Add the code below to all your pages.  You may add it at any point before your page is considered complete.</li>
</ol>
<pre>
&lt;script src="boomerang.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
BOOMR.init({
		user_ip: "&lt;user's ip address&gt;",
		beacon_url: "http://yoursite.com/path/to/beacon.php",
		autorun: false
	});
&lt;/script&gt;
</pre>
<p>
The rest of your page will load normally.  When you determine (through javascript, perhaps) that your
page is usable by a user browsing your website, you need to fire the <code>page_ready</code> event like this:
</p>

<pre>
BOOMR.page_ready();	// Tell boomerang that the page is now usable
</pre>

<p>
As in howto-1a, you need to populate the <code>user_ip</code> field using a back end programming language.
</p>

<p>
Go to <a href="howto-1b-page%232.html">Page #2</a> now to see the results of the page load test.
</p>

<p class="perma-link">
The latest code and docs is available on <a href="http://github.com/lognormal/boomerang/">github.com/lognormal/boomerang</a>
</p>

<p id="results">
</p>

<script src="../../boomerang.js" type="text/javascript"></script>
<script src="howtos.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
		user_ip: '10.0.0.1',
		autorun: false,
		BW: {
			base_url: '../../images/',
			cookie: 'HOWTO-BA'
		},
		RT: {
			cookie: 'HOWTO-RT'
		}
	});

// Fire the page_ready event after 750ms
setTimeout(function() { BOOMR.page_ready(); }, 750);
</script>
</body>
</html>
<!--
    Copyright (c) 2011, Yahoo! Inc.  All rights reserved.
    Copyrights licensed under the BSD License. See the accompanying LICENSE.txt file for terms.
-->
